<script setup>
import { ref , onMounted} from 'vue';
import {getOrderListAPI , getOrderStatusCountAPI} from '@/api/order';
import { getPatientAPI } from '@/api/user'
import { useRouter} from 'vue-router';

// 全局路由对象
const router = useRouter();

// 分页参数
const pageParams = ref({
    currentPage: 1,
    pageSize: 5,
    total: 20
});


// 订单数据
const orderData = ref([]);

// 获取订单数据
const getOrderList = async () => {
    loading.value = true;
    const res = await getOrderListAPI(pageParams.value.currentPage, pageParams.value.pageSize,patientId.value,orderStatus.value);
    // console.log(res);
    orderData.value = res.data.records;
    pageParams.value.total = res.data.total;
    loading.value = false;
}

// 加载
const loading = ref(false);

// 初始化
onMounted(() => {
    getOrderList();
    getPatientList();
    getOrderStatusList();
})

// 就诊人id
const patientId = ref('');

// 订单状态
const orderStatus = ref('');

// 切换页码
const handleCurrentChange = (currentPage) => {
    pageParams.value.currentPage = currentPage;
    getOrderList();
}

// 切换页数
const handleSizeChange = (pageSize) => {
    pageParams.value.pageSize = pageSize;
    getOrderList();
}

// 查看详情
const goToDetail = (orderId) => {
    // console.log(orderId);
    // 跳转到详情页面
    router.push({path: 'order-detail', query: {orderId}})
}

// 获取就诊人
const getPatientList = async () => {
    const res = await getPatientAPI()
    console.log(res);
    patientList.value = res.data;
}

// 就诊人数据
const patientList = ref([]);

// 切换就诊人
const changePatient = (value) => {
    // console.log(value);
    getOrderList()
    
}

// 订单状态列表
const orderStatusList = ref([]);

// 获取订单状态列表
const getOrderStatusList = async () => {
    const res  = await getOrderStatusCountAPI();
    console.log(res);
    orderStatusList.value = res.data;
}

// 切换订单状态
const orderStatusChange = (value) => {
    getOrderList()
}
</script>
<template>
    <div class="order">
        <el-card>
            <template #header>
                <span>挂号订单</span>
            </template>
            <el-form :inline="true"  class="demo-form-inline" label-width="70px">
                <el-form-item label="就诊人">
                <el-select
                    placeholder="选择所有有患者"
                    v-model="patientId"
                    @change="changePatient"
                    clearable
                >
                    <el-option v-for="item in patientList" :key="item.id" :label="item.name" :value="item.id" />
                   
                </el-select>
                </el-form-item>
                <el-form-item label="订单状态">
                <el-select
                    placeholder="选择所有有患者"
                    v-model="orderStatus"
                    @change="orderStatusChange"
                >
                    <el-option v-for="item in orderStatusList" :key="item.status" :label="item.comment" :value="item.status" />
                  
                </el-select>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" style="width: 100%" :data="orderData">
                <el-table-column prop="quitTime" label="就诊时间" width="180" />
                <el-table-column prop="hosname" label="医院" width="180" />
                <el-table-column prop="depname" label="科室" />
                <el-table-column prop="title" label="医生" />
                <el-table-column prop="amount" label="医事服务费" />
                <el-table-column prop="patientName" label="就诊人" />
                <el-table-column prop="orderStatus" label="订单状态" >
                    <template v-slot="{ row }">
                        <el-tag v-if="row.orderStatus === 1" type="success" effect="dark">挂号成功 </el-tag>
                        <el-tag v-else-if="row.orderStatus === 0" type="primary" effect="dark">待支付 </el-tag>
                        <el-tag v-else-if="row.orderStatus === 2" type="warning" effect="dark">已取号 </el-tag>
                        <el-tag v-else="row.orderStatus === -1" type="info" effect="dark">已取消 </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template v-slot="{ row }">
                      <el-button type="text" @click="goToDetail(row.id)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            v-model:current-page="pageParams.currentPage"
            v-model:page-size="pageParams.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :small="small"
            :disabled="disabled"
            :background="true"
            layout="prev, pager, next, jumper, -> ,sizes, total,"
            :total="pageParams.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </el-card>
    </div>
</template>



<style lang="scss" scoped>
.el-card {
    width: 1000px;
    .demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
}
</style>